<template>
	<view class="content">
		<!-- #ifdef H5 -->
		<u-navbar :title="$t('index.xiangqing')" :autoBack="true" bgColor="#00141E" placeholder leftIconColor="#fff" :titleStyle="{color:'#fff'}"></u-navbar>
		<!-- #endif -->
		<view class="info">
			<view class="top">{{info.title}}</view>
			<view class="center">
				<image class="image" :src="info.avatar"></image>
				<view class="c-r">
					<view>{{info.nickname}}</view>
					<view>{{info.created_at}}</view>
				</view>
			</view>
			<view v-html="info.content" style="font-size: 16px;line-height: 30px;"></view>
		</view>
		<view style="margin: 10px 0;">{{$t('yuce.xgzx')}}</view>
		<view class="info" v-for="(item,index) in info.relatedList" :key="index" @click="navigatorTo(item)" style="margin-bottom: 10px;">
			<view class="center">
				<image class="image" :src="item.avatar"></image>
				<view class="c-r">
					<view>{{item.nickname}}</view>
					<view>{{item.created_at}}</view>
				</view>
			</view>
			<view style="font-size: 16px;line-height: 30px;">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api','config']),
			computImageUrl(){
				return (url)=>{
					let domain = url.split("/")
					domain = domain[0]+'//'+ domain[2]
					let finalUrl = url.replace(domain, "");
					let imageurl= getApp().globalData.AppConfig.cdnDomain + finalUrl
					return imageurl
				}
			}
		},
		components:{},
		data() {
			return {
				matchId:'',
				info:''
			}
		},
		onLoad(op) {
			this.matchId=op.matchId
			this.getDetail()
		},
		methods: {
			navigatorTo(item){
				uni.redirectTo({
					url: '/pages/communityDetails/communityDetails?&matchId='+item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getDetail(){
				let req = {
					params: {
						id: this.matchId
					}
				}
				uni.$u.http.get(this.api.api_v1_article_detail, req).then(res => {
					if(res.code==200&&res.data){
						this.info=res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	@media screen and (min-width: 780px) {
		/deep/ .u-navbar--fixed{
			left: initial;right: inherit;width: 780px;
		}
		/deep/ .uni-page-head{
			width: 780px!important;
		}
		.content{
			max-width: 780px;margin: auto;
		}
	}
	.content {
		color: #fff;padding: 10px;padding-bottom: 51px;border-bottom: 1px solid #3c3c3c;
		.info{
			padding: 10px;border-radius: 10px;font-size: 12px;border-bottom:1px solid #242448;
			.top{
				font-size: 16px;font-weight: bold;line-height: 28px;
			}
			.center{
				display: flex;align-items: center;margin: 5px 0;
				.image{
					width: 70rpx;height: 70rpx;border-radius: 50%;margin-right: 10px;
				}
			}
		}
	}
</style>
